<!-- sidebar start -->
    <!--  sidebar-shortcuts -->
    <script type="text/html" id="sidebar-shortcuts-template">
        <div class="sidebar-shortcuts" id="sidebar-shortcuts">
            <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large" data-bind="template: {name: 'sidebar-shortcuts-large-template', foreach: data.sidebarShortcuts}"></div>
            <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini" data-bind="template: {name: 'sidebar-shortcuts-mini-template', foreach: data.sidebarShortcuts}"></div>
        </div>
    </script>
    <!-- sidebar-list -->
    <script type="text/html" id="sidebar-list-template">
        <li data-bind="css: isActive ? 'active' : ''">
            <a data-bind="css: submenu.length ? 'dropdown-toggle' : '', click: function(data, event) { $root.itemClick(data, $parents, event) }">
                <i data-bind="css: 'menu-icon fa fa-' + menuIcon"></i>
                <span data-bind="css: parentId == '0' ? 'menu-text' : ''">
                    <span data-bind="text: name"></span>
                    <!-- ko if: typeof(badge.icon) != 'undefined' -->
                    <span data-bind="css: 'badge badge-' + badge.icon, attr: { title: badge.title }, html: badge.content" data-rel="tooltip" data-placement="right"></span>
                    <!-- /ko -->
                </span>
                <b class="arrow fa fa-angle-down" data-bind="visible: submenu.length"></b>
            </a>
            <b class="arrow"></b>
            <!-- ko if: submenu.length > 0 -->
            <ul class="submenu" data-bind="template: {name: 'sidebar-list-template', foreach: submenu}"></ul>
            <!-- /ko -->
        </li>
    </script>

    <!-- template small part -->
    <script type="text/html" id="sidebar-shortcuts-large-template">
        <a data-bind="css: 'btn btn-' + btnColor, click: $root.itemClick">
            <i data-bind="css: 'ace-icon fa fa-' + btnIcon"></i>
        </a>
    </script>
    <script type="text/html" id="sidebar-shortcuts-mini-template">
        <a data-bind="css: 'btn btn-' + btnColor, click: $root.itemClick"></a>
    </script>
<!-- sidebar end -->

<!-- nav-user start -->
    <script type="text/html" id="nav-user-template">
        <li data-bind="css: 'dropdown-modal ' + data.color">
            <a class="dropdown-toggle" data-toggle="dropdown" href="">
                <!-- ko if: data.photoSrc -->
                <img data-bind="attr: { src: data.photoSrc }" class="nav-user-photo" alt="Photo" />
                <!-- /ko -->
                <span class="user-info">
                    <small data-bind="text: data.role"></small>
                    <!-- ko text: data.name -->
                    <!-- /ko -->
                </span>
                <!-- ko if: data.menu.length > 0 -->
                <i class="ace-icon fa fa-caret-down"></i>
                <!-- /ko -->
            </a>
            <ul data-bind="template: {name: 'nav-user-menu-item-template', foreach: data.menu}, css: 'user-menu dropdown-menu-right dropdown-menu dropdown-caret dropdown-close ' + data.menuItemHoverCss"></ul>
        </li>
    </script>

    <!-- template small part -->
    <script type="text/html" id="nav-user-menu-item-template">
        <!-- ko if: typeof($data.name) == 'undefined' -->
            <li class="divider"></li>
        <!-- /ko -->
        <!-- ko ifnot: typeof($data.name) == 'undefined' -->
            <li>
                <a data-bind="click: $root.itemClick">
                    <i data-bind="css: 'ace-icon fa fa-' + menuIcon"></i>
                    <!-- ko text: name -->
                    <!-- /ko -->
                </a>
            </li>
        <!-- /ko -->
    </script>
<!-- nav-user end -->

<!-- breadcrumb start -->
    <script type="text/html" id="breadcrumb-template">
        <div id="breadcrumbs" class="breadcrumbs ace-save-state">
            <ul class="breadcrumb" data-bind="template: {name: 'breadcrumb-item-template', foreach: breadcrumb}">
                <li>
                    <i class="home-icon ace-icon fa fa-home"></i>
                    <a href="">Home</a>
                </li>
                <li>
                    <a href="#">Tables</a>
                </li>
                <li class="active">jqGrid plugin</li>
            </ul>
        </div>
    </script>

    <!-- template small part -->
    <script type="text/html" id="breadcrumb-item-template">
        <li>
            <!-- ko if: icon -->
            <i data-bind="css: 'ace-icon home-icon fa fa-' + icon"></i>
            <!-- /ko -->
            <!-- ko text: name -->
            <!-- /ko -->
        </li>
    </script>
<!-- breadcrumb end -->